<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="法人信息">
        <p>
          状态：<span v-if="ruleForm.status != 1" style="color: red"
            >未审核</span
          >
          <span v-else style="color: blue">审核通过</span>
        </p>
        <p>身份证照片:</p>
        <el-upload
          class="avatar-uploader"
          style="display: inline"
          action="http://localhost:8080/ocr/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img
            v-if="frontImageUrl"
            :src="frontImageUrl"
            class="avatar"
            style="width: 300px; height: 200px"
          />
          <el-icon v-else class="avatar-uploader-icon"><Plus />正面</el-icon>
        </el-upload>
        <el-upload
          class="avatar-uploader"
          style="display: inline"
          action="http://localhost:8080/ocr/upload"
          :show-file-list="false"
          :on-success="handleAvatarSucces0"
        >
          <img
            v-if="backImageUrl"
            :src="backImageUrl"
            class="avatar"
            style="width: 300px; height: 200px"
          />
          <el-icon v-else class="avatar-uploader-icon"><Plus />反面</el-icon>
        </el-upload>
        <p />
        <el-form
          style="max-width: 500px"
          :model="ruleForm"
          status-icon
          label-width="auto"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名：">
            <el-input v-model="ruleForm.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="证件号：">
            <el-input v-model="ruleForm.identity" autocomplete="off" />
          </el-form-item>
          <el-form-item label="有效日期：">
            <el-col :span="11">
              <el-date-picker
                v-model="ruleForm.exp"
                type="date"
                aria-label="Pick a date"
                placeholder="Pick a date"
                style="width: 100%"
              />
            </el-col>
            <el-col class="text-center" :span="1" style="margin: 0 0.5rem"
              >--</el-col
            >
            <el-col :span="11">
              <el-date-picker
                v-model="ruleForm.ddl"
                type="date"
                aria-label="Pick a date"
                placeholder="Pick a date"
                style="width: 100%"
              />
            </el-col>
          </el-form-item>
          <el-form-item style="width: 100%; margin-left: 15px">
            <el-button type="primary" style="width: 45%" @click="tijioao"
              >确认</el-button
            >
            <el-button style="width: 45%">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="营业执照"> <business></business></el-tab-pane>
      <el-tab-pane label="其他资质">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/ocr/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess05"
        >
          <img v-if="qitaUrl" :src="qitaUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <el-form-item style="width: 100%; margin-left: 15px">
          <el-button type="primary" style="width: 45%" @click="qita()"
            >确认</el-button
          >
          <el-button style="width: 45%">取消</el-button>
        </el-form-item>
      </el-tab-pane>
      <el-tab-pane label="开户信息">
        <p>
          状态：<span v-if="kaihuFrom.status !== 1" style="color: yellowgreen"
            >未审核</span
          >
          <span v-else style="color: blue">审核通过</span>
        </p>
        <el-upload
          class="avatar-uploader"
          style="display: inline"
          action="http://localhost:8080/ocr/upload"
          :show-file-list="false"
          :on-success="handleAvatarSucces1"
        >
          <img
            v-if="kaihuUrl"
            :src="kaihuUrl"
            class="avatar"
            style="width: 300px; height: 200px"
          />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <p />
        <el-form
          style="max-width: 500px"
          :model="kaihuFrom"
          status-icon
          label-width="auto"
          class="demo-ruleForm"
        >
          <el-form-item label="开户名称">
            <el-input v-model="kaihuFrom.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="开户省市">
            <el-input v-model="kaihuFrom.area" autocomplete="off" />
          </el-form-item>
          <el-form-item label="开户银行">
            <el-input v-model="kaihuFrom.bank" autocomplete="off" />
          </el-form-item>
          <el-form-item label="开户支行">
            <el-input v-model="kaihuFrom.subbranch" autocomplete="off" />
          </el-form-item>
          <el-form-item label="银行账号">
            <el-input v-model="kaihuFrom.bocid" autocomplete="off" />
          </el-form-item>
          <el-form-item style="width: 100%; margin-left: 15px">
            <el-button type="primary" style="width: 45%" @click="kaihutijiao()"
              >确认</el-button
            >
            <el-button style="width: 45%">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script lang="ts" setup>
import business from "./business.vue";
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElNotification, UploadProps } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
const router = useRouter();
//导入缓存js
import { useTokenStore } from "@/stores/token";
const yonghu = useTokenStore().token;
// 身份证正反url
const frontImageUrl = ref("");
const backImageUrl = ref("");
//图片回响上传方法
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  frontImageUrl.value = URL.createObjectURL(uploadFile.raw!);
  ruleForm.value.front = response.shuju;
};
const handleAvatarSucces0: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  backImageUrl.value = URL.createObjectURL(uploadFile.raw!);
  ruleForm.value.opposite = response.shuju;
};
//法人表单
const ruleForm = ref({
  front: "",
  opposite: "",
  name: "",
  identity: "",
  exp: "",
  ddl: "",
  merchantid: "",
  sanhulei: "",
});
//法人信息提交
import geren from "@/api/merchant/gerenxq";
import { da, tr } from "element-plus/es/locale";
const tijioao = async () => {
  ruleForm.value.merchantid = yonghu.id;
  ruleForm.value.sanhulei = "2";
  // console.log(ruleForm.value)
  let data = await geren.gaiorzeng(ruleForm);
  if (data.flag) {
    ElNotification.success("提交成功");
  } else {
    ElNotification.error("提交失败");
  }
};
//查询法人详情
const gerenxq = async (id) => {
  let data = await geren.farenxq(id);
  console.log(data);
  if (data.flag) {
    ruleForm.value = data.shuju;
    frontImageUrl.value = ruleForm.value.front;
    backImageUrl.value = ruleForm.value.opposite;
  }
};
//开户图片
const kaihuUrl = ref("");
//开户图片回响
const handleAvatarSucces1: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  kaihuUrl.value = URL.createObjectURL(uploadFile.raw!);
  kaihuFrom.value.imgs = response.shuju;
};
//开户表单
const kaihuFrom = ref({});
//开户详情
const kaihuxq = async (kaihuid) => {
  let data = await geren.kaihuxq(kaihuid);
  if (data.flag == true) {
    kaihuFrom.value = data.shuju;
    kaihuUrl.value = kaihuFrom.value.imgs;
  }
};
//开户提交
const kaihutijiao = async () => {
  kaihuFrom.value.merchantid = yonghu.id;
  let data = await geren.kaihugaizen(kaihuFrom);
  console.log(data);
  if (data.flag) {
    ElMessage({
      message: "提交成功",
      type: "success",
    });
  } else {
    ElMessage.error("提交失败");
  }
};
//其他资质
const qitaUrl = ref("");
const handleAvatarSuccess05: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  frontImageUrl.value = URL.createObjectURL(uploadFile.raw!);
  frontImageUrl.value = response.shuju;
  qitaUrl.value = response.shuju;
};

//其他资质提交
const qita = async () => {
  yonghu.otherQualifications = qitaUrl.value;
  let shuju = ref({ id: "", imgs: "" });
  shuju.value.imgs = yonghu.otherQualifications;
  shuju.value.id = yonghu.id;
  let data = await geren.qitazz(shuju);
  if (data.flag) {
    ElMessage({
      message: "提交成功",
    });router.push("/mercxq");
  } else {
    ElMessage.error("提交失败");
  }
};
//钩子函数
onMounted(() => {
  qitaUrl.value = yonghu.otherQualifications;
  gerenxq(yonghu.legalPerson);
  kaihuxq(yonghu.openanAccount);
});
</script>
    
    
<style lang='scss' scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>